<template>
  <!-- <Message message="hello message" :duration="0" show-close></Message> -->
  <header>
    <!-- <Tooltip content="Hello World" placement="right" trigger="hover" ref="tooltipRef" :open-delay="1000"
      :close-delay="1000">
      <img src="./assets/logo.svg" alt="Vue logo" width="125" height="125">
    </Tooltip> -->
    <Dropdown :menu-options="options" placement="right" trigger="click">
      <img src="./assets/logo.svg" alt="Vue logo" width="125" height="125">
    </Dropdown>
  </header>
  <main>
    <Icon icon="fa-solid fa-user-secret" />
    <Icon icon="arrow-up" size="2xl" type="primary" />
    <Icon icon="arrow-up" size="2xl" color="#f2f2f2" />
    <Button @click="open" ref="buttonRef">Test Button</Button>
    <Button @click="close" plain>Plain Button</Button>
    <Button round>Round Button</Button>
    <Button circle>VK</Button>
    <Button disabled>Disabled Button</Button><br /><br />
    <Button type="primary">Primary</Button>
    <Button type="success">Success</Button>
    <Button type="info">Info</Button>
    <Button type="warning">Warning</Button>
    <Button type="danger">Danger</Button><br /><br />
    <Button type="primary" plain>Primary</Button>
    <Button type="success" plain>Success</Button>
    <Button type="info" plain>Info</Button>
    <Button type="warning" plain>Warning</Button>
    <Button type="danger" plain>Danger</Button><br /><br />
    <Button size="large">Large</Button>
    <Button size="small">Small</Button><br /><br />
    <Button size="large" loading>loading</Button>
    <Button size="large" icon="arrow-up">Icon</Button><br /><br />
    <Collapse v-model="opendValue" accordion>
      <Item name="a" title="Title A">
        <h2>sdshfj</h2>
        <div> this is content a aaa </div>
      </Item>
      <Item name="b" title="Title B">
        <div> this is bbbbb test </div>
      </Item>
      <Item name="c" title="Disabled Title" disabled>
        <div> this is cccc test </div>
      </Item>
    </Collapse>
    {{ opendValue }}
    <Input v-model="inputValue" clearable show-password @input="handleInput" />
  </main>
</template>
<script setup lang="ts">
import { ref, onMounted, h } from 'vue'
import type { ButtonInstance } from './components/Button/types'
import Button from './components/Button/Button.vue'
import Collapse from './components/Collapse/Collapse.vue'
import Item from './components/Collapse/CollapseItem.vue'
import Icon from './components/Icon/Icon.vue'
import Tooltip from './components/Tooltip/Tooltip.vue'
import Dropdown from './components/Dropdown/Dropdown.vue'
// import Message from './components/Message/Message.vue'
import Input from './components/Input/Input.vue'
import { createMessage } from './components/Message/method'
import type { MenuOption } from './components/Dropdown/types'
import type { TooltipInstance } from './components/Tooltip/types'
// import type { Options } from '@popperjs/core'
const buttonRef = ref<ButtonInstance | null>(null)
const tooltipRef = ref<TooltipInstance | null>(null)
const opendValue = ref(['a'])
const inputValue = ref('1')

const handleInput = (v: string) => {
  console.log(v, 'v')
}
// const options: Partial<Options> = { placement: 'right-end', strategy: 'fixed' }
const options: MenuOption[] = [
  { key: 1, label: h('b', 'this is bold') },
  { key: 2, label: 'item2', disabled: true },
  { key: 3, label: 'item3', divided: true },
  { key: 4, label: 'item4' }
]
const open = () => {
  tooltipRef.value?.show()
}
const close = () => {
  tooltipRef.value?.hide()
}
onMounted(() => {
  const instance = createMessage({
    message: 'hello world',
    duration: 0
  })
  createMessage({
    message: 'hello world again',
    duration: 3000,
    type: 'success',
    showClose: true
  })
  createMessage({
    message: 'hello world three',
    duration: 0,
    showClose: true
  })
  if (buttonRef.value) {
    console.log('buttonRef', buttonRef.value.ref)
  }
  setTimeout(() => {
    opendValue.value = ['a', 'b']
    instance.destory()
  }, 2000)
})
</script>

<style scoped></style>
